import React, { Component } from 'react'
import Device from "../../../types/Device";
import './deviceItem.less'
import { Link } from 'react-router-dom';
import { queryDeviceCover } from '../../../requests/Device';
import defaultPic from '../../../static/images/default.png'
import { message } from 'antd';
import moment from 'moment';
import { getRes } from "../../../configFile";

interface IProps {
    device: Device
}

interface IState {
    coverPicture: string
}

export default class DeviceItem extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props)
        this.state = {
            coverPicture: ''
        }
    }

    async componentDidMount() {
        try {
            const pictureRes = getRes(await queryDeviceCover(this.props.device.deviceID))
            if (pictureRes.isSuccessful) {
                this.setState({
                    ...this.state,
                    coverPicture: pictureRes.data
                })
            }
        } catch (err) {
            message.error(err.toString())
        }
    }

    render() {
        const { device } = this.props;
        return (
            <div className='deviceItem'>
                <div className="title">
                    <Link className='deviceTitle' to={`/device/${device.deviceID}`}>
                        {device.deviceName}
                    </Link>
                </div>
                <div className="content">
                    <div className="imgBox">
                        <img
                            alt="logo"
                            src={this.state.coverPicture ? this.state.coverPicture : defaultPic}
                            style={{ height: '100%' }}
                        />
                    </div>
                    <div className="param">
                        设备id：{device.deviceID}<br />
                        所属厂商id：{device.manufacturerID}<br />
                        创建时间：{moment(device.creationTime).format('YYYY年MM月DD日')}<br />
                        最后修改时间：{moment(device.lastModifiedTime).format('YYYY年MM月DD日')}
                    </div>
                </div>
            </div>
        )
    }
}